<template>
	<view>
		<uni-status-bar ></uni-status-bar>
		<view class="nav-bar" style="display: flex;justify-content: space-between;align-items: center;">
			<view @tap="submit()">修改</view>
			<view>个人信息</view>
			<view @tap="back()">取消</view>
		</view>
		
		<view class="image-view">
			<view @tap="chooseImage()" style="display: flex;justify-content: center;">
				<image :src="user_icon"></image>
			</view>
			<view class="font">点击修改头像</view>
		</view>
		
		<view class="userinfo">
			<view class="nickname item">
				<view class="font">昵称</view>
				<view class="value">
					<input  v-model="username"/>
				</view>
			</view>

			<view class="signature item">
				<view class="font">签名</view>
				<view class="value">
					<input placeholder="这个家伙很懒，什么也没写~" v-model="signature"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniStatusBar from "../../components/uni-status-bar.vue";
	export default {
		components:{
			uniStatusBar
		},
		data() {
			return {
				changeIcon: false,
				username:"",
				user_icon:"",
				birthday:"",
				sex:"",
				background_image:"",
				signature:""
			}
		},
		onLoad(){
			this.getUserInfo();
			uni.getLocation({
			    type: 'wgs84',
				geocode: true,
			    success: function (res) {
			        console.log('当前位置的经度：' + res.longitude);
			        console.log('当前位置的纬度：' + res.latitude);
					console.log(res);
			    }
			});
		},
		methods: {
			changeBirthday(event){
				this.birthday = event.detail.value;
			},
			back(){
				uni.navigateBack();
			},
			changeSex(e){
				this.sex = e.detail.value;
			},
			async getUserInfo(){
				this.username = this.User.userinfo.username;
				this.user_icon = this.User.userinfo.user_icon;
				this.signature = this.User.userinfo.signature;
			},
			chooseImage(){
				uni.chooseImage(
					{
						count: 1,
						sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success:  (res) => {
							if(res.tempFilePaths[0] != undefined){
								this.user_icon = res.tempFilePaths[0];
								this.changeIcon = true;
							}
						}
					}
				);
			},
			async submit(){
				this.username = this.username.trim()
				if(this.username == ""){
					uni.showToast({ title: '昵称不能为空', icon:"none" });
					return
				}
				
				
				uni.showLoading({
				    title: '修改中...'
				});
				
				if(!this.changeIcon){
					let param = {
						username: this.username,
						signature: this.signature,
					};
					
					this.postInfo(param);
					return;
				}
				
				let option = {
					filePath: this.user_icon,
					name: "file"
				}
				let [err, res] = await this.$http.upload("file/upload", option, {checkToken: true});
				if(!this.$http.errorCheck(err,res)){
					return;
				}
				
				let resJson = JSON.parse(res.data)
				
				let param = {
					username: this.username,
					signature: this.signature,
					user_icon: resJson.data.path,
				};
				
				this.postInfo(param);
			},
			async postInfo(param){
				let [err, res] = await this.$http.post("user/preUpdate", param, {checkToken: true});
				if(!this.$http.errorCheck(err,res)){
					return;
				}
				
				uni.hideLoading();
				uni.showToast({ title: '信息提交审核中'});
				
				this.User.userinfo.username = this.username;
				this.User.userinfo.user_icon = this.user_icon;
				this.User.userinfo.signature = this.signature;
				
				uni.setStorageSync("userinfo", this.User.userinfo);
				
				
				setTimeout(function() {
					uni.switchTab({
					    url: '/pages/home/index'
					});
				}, 1000);
			}
		}
	}
</script>

<style scoped>
.nav-bar{
	width:auto;
	white-space: nowrap;
	height: 100upx;
	border-bottom: 1px solid #c8c7cc;
	padding-left: 20upx;
	padding-right: 20upx;
}
.nav-bar>view{
	text-align: center;
	font-size: 30upx;
	height:50upx
}
.nav-bar>view:nth-child(3){
	width:80upx;
	border: 2upx solid red;
	color:red;
}
.image-view{
	height: 300upx;
	border-bottom: 20upx solid #f3f3f3;
	width:auto;
}
.image-view>view:nth-of-type(1){
	height: 70%;
}
.image-view>view:nth-of-type(2){
	height: 30%;
	text-align: center;
	color: #AAAAAA;
}
.image-view image{
	height: 200upx;
	width: 200upx;
	border-radius: 100%;
}
.userinfo{
	padding: 20upx 20upx;
}
.userinfo>view>*{
	font-size: 35upx;
	height: 100%;
}
/* .userinfo>view>view:nth-of-type(1){
	width: 30%;
}
.userinfo>view>view:nth-of-type(2){
	color: #AAAAAA;
	width: 60%;
} */
.userinfo>view{
	display: flex;
	margin-top: 20upx;
}
.userinfo input{
	height: 100%;
	width: 100%;
}
.font{
	color: #A1A1A1;
	font-size: 30rpx;
}
.font-small{
	color: #A1A1A1;
	font-size: 20rpx;
}
.item{
	margin-bottom: 30rpx;
	border-bottom: 1rpx solid #E4E4E4;
	position: relative;
	height: 70rpx;
}
.value{
	margin-left: 100rpx !important;
	width: 70%;
}
</style>
